<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
    <link rel="stylesheet" href="../css/handout.css" media="all">
</head>
<style>
    .layui-top-box {padding:40px 20px 20px 20px;color:#fff}
    .panel {margin-bottom:17px;background-color:#fff;border:1px solid transparent;border-radius:3px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.05);box-shadow:0 1px 1px rgba(0,0,0,.05)}
    .panel-body {padding:15px}
    .panel-title {margin-top:0;margin-bottom:0;font-size:14px;color:inherit}
    .layui-inline{margin-bottom: 15px;}
</style>
<body>
<div class="layuimini-container">
    <div class="title">
        <em></em>
        <h3>支付流水</h3>
    </div>
    <form class="layui-form padding15_10" action="" id="grantForm">
        <div class="layui-inline">
            <div class="layui-input-inline">
                <input type="text" name="beginDate" id="beginDate" placeholder="申请开始时间" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <div class="layui-input-inline">
                <input type="text" name="endDate" id="endDate" placeholder="申请结束时间" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <div class="layui-input-inline">
                <input type="text" name="orderId" placeholder="请输入订单号" class="layui-input">
            </div>
        </div>

        <div class="layui-inline">
            <div class="layui-input-inline">
                <input type="text" name="name" placeholder="姓名" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <div class="layui-input-inline">
                <input type="text" name="account" placeholder="收款账号" class="layui-input">
            </div>
        </div>
        <!--<div class="layui-inline">
            <div class="layui-input-inline">
                <select name="interest" lay-filter="aihao">
                    <option value="">所有</option>
                </select>
            </div>
        </div>-->

        <div class="layui-input-inline">
            <select name="timerChange" lay-filter="timerChange">
                <option value="">自选时段</option>
                <option value="1">当日</option>
                <option value="2">本月</option>
                <option value="3">本季</option>
                <option value="4">本年</option>
            </select>
        </div>

        <div class="layui-inline">
            <div class="layui-input-inline">
                <button class="layui-btn" lay-submit="" lay-filter="searchBtn">查询</button>
                <button type="reset" class="layui-btn layui-btn-primary">清空</button>
            </div>
        </div>


    </form>
    <div class="layuimini-main layui-top-box">
        <div class="layui-row layui-col-space10">

            <div class="layui-col-md6">
                <div class="col-xs-6 col-md-3">
                    <div class="panel layui-bg-gray">
                        <div class="panel-body">
                            <div class="panel-title">
                                <img src="/images/q.png" width="80" height="80">
                            </div>
                            <div class="panel-content">
                                <h4>发放总金额</h4>
                                <h1 class="stat-percent font-bold text-gray" id="totalAmount"></h1>

                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-col-md6">
                <div class="col-xs-6 col-md-3">
                    <div class="panel layui-bg-gray">
                        <div class="panel-body">
                            <div class="panel-title">
                                <img src="/images/ok.png" width="80" height="80" >
                            </div>
                            <div class="panel-content">
                                <h4>本月发放金额</h4>
                                <h1 class="stat-percent font-bold text-gray" id="okAmount"></h1>
                            </div>
                        </div>
                    </div>
                </div>
            </div>



        </div>
    </div>
    <!--<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
        <ul class="layui-tab-title">
            <li class="layui-this">全部</li>
            <li>支付成功</li>
            <li>支付中</li>
            <li>支付失败</li>
        </ul>
    </div>-->

    <div class="layuimini-main">
     <a lay-filter="exportAllIn" lay-submit="" class="layui-btn">导出全部</a>
     
        <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>


    </div>



</div>
<script src="../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script>
    var this_ = '', tableIns;
    layui.use(['form', 'table','jquery','element','laydate','tfApi'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table,
            $ = layui.jquery,
            this_ = $,
            element = layui.element,
            laydate = layui.laydate,
            API = layui.tfApi;

      /*  API.postAjax('/seller/qryAmountTotal',{},function (res) {

            if(res.code == 0){
                var data = res.data;
                $("#totalAmount").html("￥"+data.totalAmount);
                $("#okAmount").html("￥"+data.succAmount);
            }

        });

       */

        tableIns = table.render({
            elem: '#currentTableId',
            url: API.CURL + '/seller/qryProvideDetails',
            cellMinWidth: 60,
           // toolbar:'#topbar ',
           // defaultToolbar: ['filter', 'exports', 'print'],
            method: "POST",
            contentType: 'application/json',
            xhrFields: {withCredentials: true},crossDomain: true,
            request:{
                pageName: "page",
                limitName : "pageSize"
            },
            parseData: function(res){ //res 即为原始返回的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.details, //解析数据列表
                    "totalSend" : res.data.totalSend, // 解析自定义字段-
                    "succSend" : res.data.succSend // 解析自定义字段
                };
            },
           /* where:{
                "beginDate" : beginDateInit + " 00:00:00",
                "endDate" : endDateInit + " 23:59:59"
            },

            */
            cols: [[
                {field: 'sellerName', title: '商户名称'},
                {field: 'orderId', title: '客户订单号'},
                {field: 'id', title: '交易流水号'},
                {field: 'askTime', title: '请求时间'},
                {field: 'payeeName', title: '收款人姓名'},
                {field: 'payeeAccount', title: '收款账号',minWidth:160},
                {field: 'payAmount', title: '交易金额',templet:function (d) {
                        return '<b>'+API.numFun(d.payAmount)+'</b>'
                },align:"right"},
                {field: 'status', title: '交易状态', templet:function (d) {
                    var _str = '';
                    if(d.status == 0){_str = '<span style="color: #00a2d4">发放中</span>';}
                    if(d.status == 1){
                        if(d.paymentStatus == 'N'){
                            _str = '<span style="color: #3aadff">发放成功<br/>线下支付</span>';
                        }
                        else if(d.paymentStatus == 'S'){
                            _str = '<span style="color: #3aadff">发放成功<br/>线上支付</span>';
                        }
                        else if(d.paymentStatus == 'P'){
                            _str = '<span style="color: #00a2d4">发放中<br/>银行处理</span>';
                        }
                        else if(d.paymentStatus == 'F' && d.paymentCode == '1005' || d.paymentCode == '2005' || d.paymentCode == '4003' || d.paymentCode == '4012'){
                            _str = '<span style="color: #ff0000">发放失败<br/>'+d.paymentMsg+'</span>';
                        }
                        else if(d.paymentStatus == 'F' && d.paymentCode != '1005' || d.paymentCode != '2005' || d.paymentCode != '4003' || d.paymentCode != '4012'){
                            _str = '<span style="color: #ff0000">发放失败<br/>支付异常</span>';
                        }
                        else{
                            _str = '<span style="color: #00a2d4">发放处理中</span>';
                        }
                    }
                    if(d.status == 2){_str = '<span style="color: #ff0000">取消发放</span>';}
                    return _str;
                }},
               // {field: 'tradeRemark', title: '备注'},
            ]],
            page: true,
            done: function (res) {
                console.log('res==VV==done',res);
                if(res.count == 0){
                    $("#totalAmount").html("<b>0.00</b>");
                    $("#okAmount").html("<b>0.00</b>");
                }else {
                    $("#totalAmount").html("<b>"+API.numFun(res.totalSend)+"</b>");
                    $("#okAmount").html("<b>"+API.numFun(res.succSend)+"</b>");
                }
            }
            //skin: 'line'
        });

        form.on('submit(searchBtn)',function (data) {
            var beginDate = $("#beginDate").val(),
                endDate = $("#endDate").val(),
                orderId = $("input[name='orderId']").val(),
                account = $("input[name='account']").val(),
                name = $("input[name='name']").val();
            if(beginDate == ''){
                beginDate = getlastmonth() + ' 00:00:00';
            }
            if(endDate == ''){
                endDate = getcurrent() + ' 23:59:59';
            }
            let query_y = {
                page: {
                    curr: 1 //重新从第 1 页开始
                }
                , done: function (res, curr, count) {
                    //完成后重置where，解决下一次请求携带旧数据
                 //   this.where = {};
                }
            };

            query_y.where = {
                "beginDate" : beginDate,
                "endDate" : endDate,
                "orderId" : orderId,
                "account" : account,
                "name" : name
            };
            tableIns.reload(query_y);
            return false;
        });


        form.on("select(timerChange)", function(data){
            //console.log(data.elem); //得到select原始DOM对象
            //console.log(data.value); //得到被选中的值
            //console.log(data.othis); //得到美化后的DOM对象

            var now = new Date();

            var year = now.getFullYear();
            var month = now.getMonth()+1;
            var day = now.getDate();

            if(day < 10){
                day = "0"+day;
            }
            if(month < 10){
                month = "0"+month;
            }

            var beginTime = "";
            var endTime = "";

            if(data.value == "1"){
                //当日
                beginTime = year+"-"+month+"-"+day + " 00:00:00";
                endTime = year+"-"+month+"-"+day + " 23:59:59";
            }else if(data.value == "2"){
                //本月
                beginTime = year+"-"+month+"-01 00:00:00";

                if(month == "02"){
                    //2月特殊处理，并分成闰年和平年
                    if(year % 4 == 0){
                        endTime = year+"-"+month+"-29 23:59:59";
                    }else{
                        endTime = year+"-"+month+"-28 23:59:59";
                    }
                }else if(month == "01" || month == "03"
                    || month == "05" || month == "07"
                    || month == "08" || month == "10"
                    || month == "12"){
                    //大月，每月31天
                    endTime = year+"-"+month+"-31 23:59:59";
                }else{
                    //小月，每月30天
                    endTime = year+"-"+month+"-30 23:59:59";
                }
            }else if(data.value == "3"){
                //本季
                if(month<=3){
                    beginTime = year + "-01-01 00:00:00";
                    endTime = year + "-03-31 23:59:59"
                }else if(month>3 && month<=6){
                    beginTime = year + "-04-01 00:00:00";
                    endTime = year + "-06-30 23:59:59"
                }else if(month>6 && month<=9){
                    beginTime = year + "-07-01 00:00:00";
                    endTime = year + "-09-30 23:59:59"
                }else{
                    beginTime = year + "-10-01 00:00:00";
                    endTime = year + "-12-30 23:59:59"
                }
            }else if(data.value == "4"){
                //本年
                beginTime = year + "-01-01 00:00:00";
                endTime = year + "-12-30 23:59:59";
            }

            $("#beginDate").val(beginTime);
            $("#endDate").val(endTime);
        });


        //日期
          laydate.render({
            elem: '#beginDate'
              ,type: 'datetime'
          });
          laydate.render({
            elem: '#endDate'
              ,type: 'datetime'
          });

        //将个数位日期转为07
        function p(s) {
            return s < 10 ? '0' + s : s;
        }

        function getcurrent() {
//将一个月的日期填入搜索框
            var currentYear=new Date().getFullYear();
            var currentMonth=new Date().getMonth()+1;
            var currentDate=new Date().getDate();
            var current =currentYear+"-"+p(currentMonth)+"-"+p(currentDate);
            return current;
        }


        function getlastmonth() {
            var currentYear=new Date().getFullYear();
            var currentMonth=new Date().getMonth()+1;
            var lastMonth=new Date().getMonth();
            var currentDate=new Date().getDate();
            var prevCurrentYear=0;
            var prevCurrentMonth=0;
            if(currentMonth==0){
                prevCurrentYear=currentYear-2;
                prevCurrentMonth=12;
            }else{
                prevCurrentYear=currentYear-1;
                prevCurrentMonth=currentMonth;
            }
            var lastmonth=prevCurrentYear+"-"+p(prevCurrentMonth)+"-"+p(currentDate)
            return lastmonth;
        }
        
        
        form.on('submit(exportAllIn)', function(){
        	
        	 var beginDate = $("#beginDate").val(),
             endDate = $("#endDate").val(),
             orderId = $("input[name='orderId']").val(),
             account = $("input[name='account']").val(),
             name = $("input[name='name']").val();
         if(beginDate == ''){
             beginDate = getlastmonth() + ' 00:00:00';
         }
         if(endDate == ''){
             endDate = getcurrent() + ' 23:59:59';
         }
        	
        	location.href= API.CURL + '/seller/exportAll?beginDate='+ beginDate + "&endDate="+endDate+ "&orderId="+orderId+"&account="+account+"&name="+name;
  		 // alert("导出");
  	  });



    });
    function show_img(t) {
        console.log("----->",t)
        var t = this_(t).find("img");
        //页面层
        layer.open({
            type: 1,
            skin: 'layui-layer-rim', //加上边框
             area: ['80%', '80%'], //宽高
            shadeClose: true, //开启遮罩关闭
            end: function (index, layero) {
                return false;
            },
            content: '<div style="text-align:center"><img src="' + this_(t).attr('src') + '" /></div>'
        });
    }
</script>

</body>
</html>